import scrollCenter from '../behaviors/scrollCenter';
Component({
  behaviors: [scrollCenter],
  // header-class	外部样式类，覆盖标签栏整体样式	
  // active-class	外部样式类，覆盖标签激活状态样式	
  // inactive-class	外部样式类，覆盖标签默认状态样式	
  // line-class	外部样式类，覆盖标签选中时装饰线的样式	
  // header-line-class	外部样式类，覆盖标签栏装饰线的样式
  // tabimage-class	外部样式类，覆盖标签图片的样式	
  // content-class	外部样式类，覆盖标签内容样式	
  // tabpanel-class	外部样式类，覆盖面板内容样式	
  externalClasses: [
    'tabs-class',
    'header-class',
    'active-class',
    'content-class',
    'inactive-class',
    'line-class',
    'tabimage-class',
    'header-line-class',
    'tabpanel-class',
  ],
  relations: {
    '../tabpanel/index': {
      type: 'child',
      linked() {
        // 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
        this.initTabs();
      }
    },

  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * active-key	默认激活tabs的key	String	-	默认为第一个
      placement	标签位置	String	top/left/right/bottom	top
      animated	是否使用动画切换标签	Boolean	false	
      animated-for-line	是否使用动画切换装饰线	Boolean	false	
      swipeable	是否支持滑动切换标签	Boolean	false	
      scrollable	是否滚动标签栏	Boolean	false	-
      active-color	设置激活状态标签的文本和图标颜色	String	表示颜色的是16进制	-
      inactive-color	设置未激活状态标签的文本和颜色	String	表示颜色的是16进制	-
      has-line	设置是否显示标签下的装饰线	Boolean	-	true
      content-height	内容区域高度	Number	-	-
#
   */
  properties: {
    activeKey: {
      type: String,
      value: '',
    },
    placement: {
      type: String,
      value: 'top',
    },
    animated: Boolean,
    swipeable: Boolean,
    scrollable: Boolean,
    hasLine: {
      type: Boolean,
      value: true
    },
    animatedForLine: Boolean,
    activeColor: {
      type: String,
      value: '#f5c644'
    },
    inactiveColor: {
      type: String,
      value: '#666'
    },
    equalWidth: {
      type: Boolean,
      value: true
    },
    // 内容区域高度
    contentHeight: Number
  },

  data: {
    tabList: [],
    currentIndex: 0,
    transformX: 0,
    transformY: 0,
  },
  observers: {
    'activeKey': function (newKey) {
      if (!newKey) return;
      const index = this.data.tabList.findIndex(tab => tab.key === newKey);
      this.setData({
        currentIndex: index
      }, () => {
        if (this.data.scrollable) {
          this.queryMultipleNodes();
        }
      });
    }
  },

  ready() {
    this.initTabs();
  },


  /**
   * 组件的方法列表
   */
  methods: {
    initTabs(val = this.data.activeKey) {
      let items = this.getRelationNodes('../tabpanel/index');
      if (items.length > 0) {
        let activeKey = val,
          currentIndex = this.data.currentIndex;
        const tab = items.map((item, index) => {

          activeKey = !val && index === 0 ? item.data.key : activeKey;
          currentIndex = item.data.key === activeKey ? index : currentIndex;
          return {
            ...item.data
          };
        });
        this.setData({
          tabList: tab,
          activeKey,
          currentIndex,
        }, () => {
          if (this.data.scrollable) {
            this.queryMultipleNodes();
          }
        });
      }
    },
    swiperChange(e) {
      const {
        source,
        current
      } = e.detail;
      if (source === 'touch') {
        const currentIndex = current;
        const activeKey = this.data.tabList[current].key;
        this._setChangeData({
          activeKey,
          currentIndex
        });
      }
    },
    handleChange(e) {
      const activeKey = e.currentTarget.dataset.key;
      const currentIndex = e.currentTarget.dataset.index;
      this._setChangeData({
        activeKey,
        currentIndex
      });
    },

    _setChangeData({
      activeKey,
      currentIndex
    }) {
      this.setData({
        activeKey,
        currentIndex
      }, () => {
        if (this.data.scrollable) {
          this.queryMultipleNodes();
        }
      });
      this.triggerEvent('onChange', {
        activeKey,
        currentIndex
      });
    }
  }
});